<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>榜单</title>
    <!-- <link rel="stylesheet" href="static/lib/bootstrap-4.6.2/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
    <script src="../static/lib/jquery-3.5.1.min.js"></script>
    <script src="../static/lib/layui/layui.js"></script>
    <!-- <script src="static/lib/bootstrap-4.6.2/bootstrap.min.js"></script> -->
</head>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav m-pl-sm m-pr-sm" lay-filter="">
        <img src="../static/favicon.ico" width="20px">
        <a href="#" class="logo">
            &nbsp;挚夕影院
        </a>
        <li class="layui-nav-item"> <a href=""><i class="layui-icon layui-icon-home">&nbsp;</i>首页</a></li>
        <li class="layui-nav-item"><a href=""><a href=""><i class="layui-icon layui-icon-windows">&nbsp;</i>电影</a></li>
        <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-link">&nbsp;</i>影院</a></li>
        <li class="layui-nav-item layui-this"><a href=""><i class="layui-icon layui-icon-tabs">&nbsp;</i>榜单</a></li>
        <span style="display: inline-block; width: 60%;">
            <div style="display: flex; padding-left: 20px;">
                <input type="text" name="title" required lay-verify="required" placeholder="找电影、影院" autocomplete="off"
                    class="layui-input" style="width: 300px;">
                <button class="layui-btn" lay-submit lay-filter="formDemo"><i
                        class="layui-icon layui-icon-search">&nbsp;</i></button>
            </div>
        </span>

        <li class="layui-nav-item" style="text-align: right!important;">
            <a href=""><img src="../static/images/me.jpg" class="layui-nav-img"></a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退出</a></dd>
            </dl>
        </li>

    </ul>

    <!-- 内容 -->
    <div class="layui-container" style="width: 100%; margin: 0%; padding: 0%;">
        <!-- 二级菜单 -->
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 m-tac">
                            <li class="layui-this" style="font-size: 18px!important;">热映榜</li>
                        </div>
                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 m-tac">
                            <li style="font-size: 18px!important;">国内票房榜</li>
                        </div>
                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 m-tac">
                            <li style="font-size: 18px!important;">北美票房榜</li>
                        </div>
                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 m-tac">
                            <li style="font-size: 18px!important;">Toop100榜</li>
                        </div>
                    </ul>
                    <!-- 榜单信息 -->
                    <div class="layui-tab-content m-mlr m-mt">
                        <!-- 一项开始 -->
                        <a class="layui-row" href="#">
                            <div class="layui-col-xs2 layui-col-sm2 layui-col-md1">
                                <span class="layui-badge layui-bg-orange"
                                    style="width: 30px; height: 30px; line-height: 30px;">1</span>
                            </div>
                            <div class="layui-col-xs3 layui-col-sm3 layui-col-md2" style="background-color: teal;">
                                <img src="../static/images/movie1.jpg" width="100%">
                            </div>
                            <div class="layui-col-xs6 layui-col-sm5 layui-col-md7 ">
                                <div style="padding-top: 10%; padding-left: 20px;">
                                    <h2 class="m-pb-normal m-pt-normal" style="text-align: left;">送你一朵小红花</h2>
                                    <div class="m-pb-normal m-pt-normal" style="text-align: left;">
                                        主演：
                                        <span>易烊千玺</span>
                                    </div>
                                    <div class="m-tc-gray m-mt-sm">
                                        上映时间：
                                        <span>2020-12-31</span>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs1 layui-col-sm2 layui-col-md2">
                                <div class="m-tc-yellow m-ts-large" style="text-align: center; padding-top: 60%;">9.2
                                </div>
                            </div>
                        </a>
                        <hr><!-- 一项结束 -->

                        <!-- 一项开始 -->
                        <a class="layui-row" href="#">
                            <div class="layui-col-xs2 layui-col-sm2 layui-col-md1">
                                <span class="layui-badge layui-bg-orange"
                                    style="width: 30px; height: 30px; line-height: 30px;">2</span>
                            </div>
                            <div class="layui-col-xs3 layui-col-sm3 layui-col-md2" style="background-color: teal;">
                                <img src="../static/images/movie2.jpg" width="100%">
                            </div>
                            <div class="layui-col-xs6 layui-col-sm5 layui-col-md7 ">
                                <div style="padding-top: 10%; padding-left: 20px;">
                                    <h2 class="m-pb-normal m-pt-normal" style="text-align: left;">如果声音不记得</h2>
                                    <div class="m-pb-normal m-pt-normal" style="text-align: left;">
                                        主演：
                                        <span>章若楠</span>
                                    </div>
                                    <div class="m-tc-gray m-mt-sm">
                                        上映时间：
                                        <span>2020-12-04</span>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs1 layui-col-sm2 layui-col-md2">
                                <div class="m-tc-yellow m-ts-large" style="text-align: center; padding-top: 60%;">8.2
                                </div>
                            </div>
                        </a>
                        <hr><!-- 一项结束 -->


                    </div>
                </div>
            </div>
        </div>


    </div>
    <script>
        layui.use(function () {
            var layer = layui.layer
                , form = layui.form,
                element = layui.element,
                carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#carousel1'
                , width: '100%' //设置容器宽度
                , height: '300px'
                , arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
            // layer.msg('Hello World');
        });
    </script>
</body>

</html>